<template>
  <div>
    <a-drawer
      v-model:visible="mVisible"
      width="800"
      class="custom-class"
      style="color: red"
      title="详情"
      destroyOnClose
      placement="right"
      @close="handleClose"
    >
    <VideoList :list="videoList">

    </VideoList>
    </a-drawer>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import VideoList from "./VideoList.vue";

const props = defineProps({
    visible: {
    type: Boolean,
    default:false,
  },
  videoList:{
    type:Array,
    default:()=>[]
  }
});
const emit = defineEmits(["close"]);
const mVisible = ref(false);


const handleClose = () => {
    emit("close"); 
}
watch(()=>props.visible,()=>{
    mVisible.value = props.visible;
})
</script>
<style lang="less" scoped></style>
